import type { SplitPaneProps } from 'react-split-pane'
import SplitPane from 'react-split-pane'
import './index.css'
import { useSandboxEle } from '../store/sandboxEleStore'

interface Props extends SplitPaneProps {
  children: any
}
function SplitPaneWrapper({ className, children, ...props }: Props) {
  const [sandboxRef] = useSandboxEle()
  const onDragStarted = () => {
    sandboxRef.current.style['pointer-events'] = 'none'
  }
  const onDragFinished = () => {
    sandboxRef.current.style['pointer-events'] = 'auto'
  }
  return (
    // @ts-expect-error jsx error
    <SplitPane
      className={className}
      defaultSize={props.defaultSize ?? '50%'}
      onDragStarted={onDragStarted}
      onDragFinished={onDragFinished}
      {...props}
    >
      {children}
    </SplitPane>
  )
}

export default SplitPaneWrapper
